<template>
  <el-dialog top="10px" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="请选择用户" width="1000px" @close="closeDlg">
    <el-form ref="queryForm" :inline="true" :model="queryForm">
      <el-form-item prop="name">
        <el-input v-model="queryForm.name" placeholder="姓名" style="width:160px;" />
      </el-form-item>
      <el-form-item prop="departmentId">
        <select-tree v-model="queryForm.departmentId" :options="deptIdOptions" width="220" clearable placeholder="所属部门" />
      </el-form-item>

      <el-form-item label="账号状态" prop="status">
        <el-select v-model="queryForm.status" style="width:100px;">
          <el-option label="全部" value="" />
          <el-option label="正常" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="职位状态" prop="state">
        <el-select v-model="queryForm.state" autocomplete="off" style="width:100px;">
          <el-option
            v-for="item in stateOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-remove-outline" title="重置" @click="resetSearchForm" />
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="tableLoading"
      highlight-current-row
      stripe
      :data="tableData"
      border
      class="table"
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="loginName" label="账号" width="120" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex| sexFormat() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="departmentName" label="所属部门" />
      <el-table-column prop="positionName" label="岗位">
        <template slot-scope="scope">
          <span>{{ scope.row.positions | namesFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="duty" label="职务" />
      <el-table-column prop="stateName" label="职位状态" width="110" />
      <el-table-column prop="status" label="账号状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFormat }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="curPage" :limit.sync="limit" @pagination="getList" />
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="closeDlg">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import Pagination from '@/components/Pagination'
import SelectTree from '@/components/SelectTree'
import { getDeptTree } from '@/api/basedata'
export default {
  name: 'SelectUser',
  components: { Pagination, SelectTree },
  data() {
    return {
      visable: false,
      tableLoading: false,
      stateOptions: [{ id: null, name: '全部' }, { id: 1, name: '在职' }, { id: 0, name: '离职' }],
      stationOptions: [],
      tableData: [],
      curPage: 1,
      limit: 5,
      total: 0,
      currentRow: null,
      queryForm: {
        state: 1,
        name: '',
        departmentId: '',
        status: '1'
      }
    }
  },
  computed: {
    deptIdOptions() {
      return getDeptTree()
    }
  },
  methods: {
    // 获取数据
    show() {
      // clone
      this.visable = true
      this.loading = true
      this.getList()
    },
    onSearch() {
      this.getList()
    },
    resetSearchForm() {
      this.$refs['queryForm'].resetFields()
    },
    getList() {
      this.currentRow = null
      this.tableLoading = true
      const param = {}
      this.copyNotBlankField(this.queryForm, param)
      const queryPage = {}
      queryPage.limit = this.limit
      queryPage.offset = this.limit * (this.curPage - 1)
      param.page = queryPage
      request({ url: '/sys/user/findPage', method: 'post', data: param })
        .then(res => {
          this.tableLoading = false
          this.tableData = res.rows
          this.total = res.total
          this.curPage = res.pageNumber
        })
        .catch(e => {
          this.tableLoading = false
          this.$message.error('查询出错')
        })
    },
    closeDlg() {
      this.currentRow = []
      this.visable = false
    },
    handleCurrentChange(row) {
      this.currentRow = row
    },
    doSubmit() {
      if (this.currentRow) {
        this.visable = false
        this.$parent.$parent.selectedUser(this.currentRow)
        this.currentRow = null
      } else {
        this.$message.info('请先点击列表，选择一个用户。')
      }
    }

  }
}
</script>

